<template>
  <t-modal
    title="检索"
    width="1346px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="handelOk()"
    wrapClassName="retrievalQuoteModal-container"
    v-bind="footer"
    forceRender
  >
    <div class="curve-modal-body">
      <div class="screen-search">
        <div class="left">
          <div class="screen-item">
            <div>文件编号：</div>
            <a-input
              v-model.trim="condition.fileCode"
              placeholder="请输入"
              style="width: 300px"
            ></a-input>
          </div>
          <div class="screen-item">
            <div>文件名称：</div>
            <a-input
              v-model.trim="condition.fileName"
              placeholder="请输入"
              style="width: 300px"
            ></a-input>
          </div>
          <div class="screen-item">
            <a-button class="cu-btn-primary" icon="search" @click="search()">
              查询
            </a-button>
            <a-button class="cu-btn-filter" icon="reload" @click="reset()">
              重置
            </a-button>
          </div>
        </div>
      </div>
      <div class="table-container">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="fileCode" title="文件编号"> </vxe-column>
          <vxe-column field="fileName" title="文件名称"> </vxe-column>
          <vxe-column field="creator" title="上传人"> </vxe-column>
          <vxe-column field="createTime" title="上传时间"> </vxe-column>
          <vxe-column field="operate" width="120" title="引用">
            <template #default="{ row, $rowIndex }">
              <a-radio
                :checked="row.check"
                @change="radioChange($event, row, $rowIndex)"
              ></a-radio>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </t-modal>
</template>

<script>
//检索引用
import { retrievalList } from "@/api/safetyManage";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    footer: {
      type: Object,
      default() {
        return {};
      },
    },
    fileCode: {
      type: String,
      default: "",
    },
    fileName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      condition: {
        fileCode: "",
        fileName: "",
      },
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          let { fileCode, fileName } = this;
          this.condition.fileCode = fileCode;
          this.condition.fileName = fileName;
          this.getData();
        }
      },
      immediate: true,
    },
  },

  methods: {
    reset() {
      this.condition.fileCode = "";
      this.condition.fileName = "";
      this.search();
    },
    search() {
      this.pager.page = 1;
      this.getData();
    },
    radioChange(ev, row, index) {
      this.tableData[index].check = ev.target.checked;
      this.tableData.forEach((v) => {
        if (v.dfsFileUuid != row.dfsFileUuid) {
          this.$set(v, "check", false);
        }
      });
    },
    getData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { fileCode, fileName } = this.condition;
        retrievalList({ fileCode, fileName })
          .then((res) => {
            this.tableData = res?.rows || [];
            this.pager.total = res?.totalCount || 0;
            this.tableData.forEach((v) => {
              this.$set(v, "check", false);
            });
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getData();
    },
    //确定
    handelOk() {
      let soucre = this.tableData.filter((v) => v.check);
      this.$emit("retrievalChange", soucre?.[0] ?? {});
      this.closeModal();
    },
    //关闭
    closeModal() {
      this.tableData = [];
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.retrievalQuoteModal-container {
  .curve-modal-body {
    height: 600px;
    display: flex;
    flex-direction: column;
    .screen-search {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .screen-item {
          align-items: center;
          display: flex;
          margin: 0 0 10px 20px;
        }
      }
    }
    .table-container {
      flex: 1;
    }
    .pager-container {
      flex-shrink: 0;
    }
  }
}
</style>
